<!-- 例子：

<pb-text-highlight content="我们都是中国人" highlightText="我们|中国人" highlightColor="red" bold @itemclick="onActionClick"></pb-text-highlight>

<pb-text-highlight content="我们都是中国人" uParse :highlightText="[{'text'
					:'我','color':'blue','blod':true,'href':'/user/pages/phoneLogin'},{'text':'们','color':'orange'},{'text':'中国人'}]" highlightColor="red" bold
					@itemclick="onActionClick"></pb-text-highlight>
-->

<template>
	<view class="pb-text-highlight">
		<template v-if="uParse">
			<u-parse :content="html" :showImgMenu="false" :copyLink="false" :setTitle="false"
				:tagStyle="{a:'text-decoration: none;color: inherit;-webkit-tap-highlight-color:transparent;'}"
				@linkTap="onItemClick"></u-parse>
		</template>
		<template v-else>
			<rich-text :nodes="html" space="nbsp" @itemclick="onItemClick"></rich-text>
		</template>
	</view>
</template>

<script>
	export default {
		name: "pb-text-highlight",
		props: {
			content: {
				type: String,
				default: "",
				require: true,
			},
			uParse: { //使用uParse小程序才能支持高亮点击操作
				type: Boolean,
				default: false,
			},
			highlightText: { //需要高亮的字符，多个用 | 隔开;当高亮文本包含‘|’请使用Array:[{"text":"","color":"","bold":false,"href":"/pages/index/home"}]
				type: [String, Array],
				default: "",
			},
			highlightColor: { //高亮颜色
				type: String,
				default: "#165DFF",
			},
			href: { //uParse=true时，a标签可做自动跳转
				type: String,
				default: "",
			},
			bold: {
				type: Boolean,
				default: false,
			},
			ignoreCase: { //忽略大小写
				type: Boolean,
				default: true,
			}

		},
		computed: {
			html() {
				if (this.highlightText === '') {
					return this.content
				}
				if (Object.prototype.toString.call(this.highlightText) === '[object Array]') {
					if (this.highlightText && this.highlightText.length > 0) {
						let content = this.content
						this.highlightText.forEach(item => {
							let reg = new RegExp((`(${item.text})`), this.ignoreCase==true?"gim":"gm")
							let weight = item.bold ? 'bold' : 'normal'
							let color = item.color ? item.color : this.highlightColor
							let href = item.href ? item.href : this.href
							if (href) {
								href = ' href="' + href + '"'
							}
							let replace = '<a ' + href + ' text="' + item.text + '" style="color:' + color +
								';font-weight: ' + weight + ';">$1</a>'
							content = content.replace(reg, replace)
						})
						return content
					}
					return this.content
				} else {
					//如果this.content里面本身就包含'<'或者'>'而它有不是标签时rich-text会解析错误，请使用u-parse解析
					let reg = new RegExp((`(${this.highlightText})`), this.ignoreCase==true?"gim":"gm")
					let weight = this.bold ? 'bold' : 'normal'
					let href = this.href
					if (href) {
						href = ' href="' + href + '"'
					}
					let replace = '<a ' + href + ' text="' + this.highlightText + '" style="color:' + this.highlightColor +
						';font-weight: ' + weight + ';">$1</a>'
					return this.content.replace(reg, replace)
				}

			}
		},
		methods: {
			//rich-text的a标签点击只在h5和app中生效，要在小程序中使用点击请使用u-parse
			onItemClick(e) {
				if (this.uParse == true) {
					console.log('【pb-text-highlight】onItemClick=>' + JSON.stringify(e))
					this.$emit('itemclick', e)
				} else {
					console.log('【pb-text-highlight】onItemClick=>' + JSON.stringify(e.detail.node.attrs))
					this.$emit('itemclick', e.detail.node.attrs)
				}

			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.pb-text-highlight {
		font-size: 32rpx;
		line-height: 44rpx;
		color: #4F4F4F;
	}
</style>